import React, { Component, useState } from "react";
import { Input, Space, Button } from "antd";
import style from "./login.module.scss";
import "./login.scss";

const Login = () => {
  const [userName, setUserName] = useState(""); //定义 用户名 的值
  const [passwoed, setPasswoed] = useState(""); //定义 密码 的值
  const [code, setCode] = useState(""); //定义 验证码 的值
  // 获取用户输入信息
  const userNameChange = (e) => {
    // console.log(e.target.value);
    setUserName(e.target.value);
  };
  const passwoedChange = (e) => {
    setPasswoed(e.target.value);
  };
  const codeChange = (e) => {
    setCode(e.target.value);
  };
  const submitLogin = () => {
    console.log("输入信息：", userName, passwoed, code);
  };
  return (
    <div className={style.login}>
      <div className={style.loginContent}>
        <Space direction="vertical" size="middle" style={{ display: "flex" }}>
          <Input placeholder="用户名" onChange={userNameChange} />
          <Input.Password placeholder="密码" onChange={passwoedChange} />
          <div className="code">
            <Input placeholder="验证码" onChange={codeChange} />
            <img
              height={40}
              src=""
              alt=""
              srcSet=""
            />
          </div>
          <Button type="primary" block onClick={submitLogin}>
            登录
          </Button>
        </Space>
      </div>
    </div>
  );
};
export default Login;
